<template>
    <div>
        <!-- nav-bar
             this.$router.push() : 路由跳转
             this.$router.back() : 路由后退
        -->
      <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()"></van-nav-bar>
      <!-- 搜索区域 输入框 -->
      <!-- clearable: 只在移动端生效 -->
      <!-- @input="hGetSuggestion" 普通的方法，没有做防抖处理-->
      <!-- @input="hGetSuggestion_with_jie_liu" 原生的节流处理 -->
      <van-search
        v-model.trim="keyword"
        clearable
        show-action
        placeholder="请输入搜索关键词"
        @input="hGetSuggestion_with_throttle">

        <!-- #action  ==== slot="action" -->
        <!-- <template #action>
            <div>搜索</div>
        </template> -->
       <div slot="action" @click="hSearch">搜索</div>
    </van-search>
    <!-- 搜索建议 v-show 显示；v-if 销毁-->
    <van-cell-group v-if="keyword">
        <van-cell
        v-for="(item,idx) in cSuggestion"
        :key="idx"
        @click="hSearchSuggestion(idx)"
        icon="search">
        <div v-html="item"></div>
        </van-cell>
        <!-- <van-cell title="单元格" icon="search"/>
        <van-cell title="单元格" icon="search"/> -->
    </van-cell-group>
    <!-- 历史记录 -->
    <van-cell-group v-else>
        <van-cell title="历史记录" />
             <van-cell
             v-for="(item,idx) in history"
             :title="item"
             :key="idx"
             @click="$router.push('/search/result?keyword='+item)">
             <!-- @click.stop 为了阻止冒泡 -->
                <van-icon name="close" @click.stop="hDeleteHistory(idx)"></van-icon>
            </van-cell>
            <!-- <van-cell title="单元格">
                <van-icon name="close"></van-icon>
            </van-cell> -->
    </van-cell-group>
    </div>
</template>

<script>
import { getSuggestion } from '@/api/search.js'
import { setItem, getItem } from '@/utils/storage'
import _ from 'lodash'

// 定义一个常量
const SEARCH_HISTORY_KEY = 'searchHistory'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 搜索关键字
      history: getItem(SEARCH_HISTORY_KEY) || [], // 保存历史记录
      suggestion: [] // 当前的搜索建议
    }
  },
  computed: {
    // 用计算属性去 suggestion 中保存内容 做高亮
    cSuggestion () {
      const reg = new RegExp(this.keyword, 'gi')
      // 对suggestion中的每一项进行正则替换，得到高亮效果的字符串
      const arr = this.suggestion.map(str => {
        return str.replace(reg, function (s) {
          return `<span style="color:red;">${s}</span>`
        })
      })
      return arr
    }
  },
  methods: {
    // 用户点击 删除历史记录
    hDeleteHistory (idx) {
      // idx 表示元素下标
      this.history.splice(idx, 1)

      // 做历史记录 持久化
      setItem(SEARCH_HISTORY_KEY, this.history)
    },
    // 向搜索记录中添加新项
    addHistory (str) {
      // 如果在history中已经存在，则可以先删除
      // findIndex如果找到了符合条件的元素，则下标不会是-1
      const idx = this.history.findIndex(item => item === str)
      if (idx !== -1) {
        // 有重复项, 删除此项
        this.history.splice(idx, 1)
      }
      // 在数组的头部添加新增的项
      this.history.unshift(str)

      // 做历史记录 持久化
      setItem(SEARCH_HISTORY_KEY, this.history)
    },
    // 1.用户在搜索建议上点击此项
    hSearchSuggestion (idx) {
      const keyword = this.suggestion[idx]
      // 把当前的搜索建议添加到 搜索历史记录中
      this.addHistory(keyword)
      // 跳转到搜索的结果页面
      this.$router.push({
        path: '/search/result',
        query: {
          keyword
        }
      })
    },
    // 2.用户在搜索按钮上点击了此项
    hSearch () {
      if (this.keyword === '') {
        return
      }
      // 把当前的搜索内容添加到 搜索历史记录中
      this.addHistory(this.keyword)
      // 跳转到搜索的结果页面
      this.$router.push({
        path: '/search/result',
        query: {
          keyword: this.keyword
        }
      })
    },
    // 当用户输入内容时,就会执行
    async hGetSuggestion () {
      if (this.keyword === '') {
        this.suggestion = []
        return
      }
      // 1.调用接口
      const result = await getSuggestion(this.keyword)
      console.log(result)
      // 保存结果、
      // 2.将获取的数据显示在建议区
      this.suggestion = result.data.data.options
    },
    // Lodash 的防抖处理 (debounce的返回值是 一个高阶函数)
    hGetSuggestion_with_debounce: _.debounce(function () {
      console.log(this.keyword)
      this.hGetSuggestion()
    }, 500),
    // Lodash 的节流处理
    hGetSuggestion_with_throttle: _.throttle(function () {
      console.log(this.keyword)
      this.hGetSuggestion()
    }, 500),
    // 当用户输入内容时,就会执行   ---防抖处理
    // 防抖（10秒）: 目标就是降频。一件事如果执行的频率非常快
    async hGetSuggestion_with_fang_dou () {
      console.log('当前用户的输入', this.keyword)
      // 以防抖5s为例： (值越大，越不灵敏)
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.hGetSuggestion()
      }, 5 * 1000)
    },
    // 当用户输入内容变化时，就会执行 --- 节流处理
    // 节流（10秒）: 目标就是降频。一件事如果执行的频率非常快，节流就是把频率降至指定的值
    async hGetSuggestion_with_jie_liu () {
      console.log('当前用户的输入', this.keyword, (new Date()).toLocaleTimeString())
      // 以节流3s为例： (值越大，越不灵敏)
      // 对于本次调用，检查本次执行距离上一次执行中间是否相隔3秒
      // 是：执行，否：不执行
      if (this.timer) { // 第一次执行 为空值就不执行
        return
      }
      this.timer = setTimeout(() => {
        this.timer = null
        this.hGetSuggestion()
      }, 3 * 1000)
    }
  }
}
/*
    防抖：可能就执行第一次调用和最后一次调用（防抖的策略有很多种）

    节流：会执行多次，只是频率降低了。
    关键字搜索：建议采用节流的方式来做优化。一方向减少服务器压力（请求次数变少了），用户体验要比防抖要好一些。

    前端界面上的常见的高频操作（事件会触发多次）:鼠标移动、窗口缩放、input文本框输入、scroll...

    业务：不能频繁发验证码请求、不能不停地登陆
*/
</script>

<style scoped lang="less">

</style>
